<template>
  <div class="personal-center-page">
    <HeaderNav title="个人中心"></HeaderNav>
    <yd-flexbox class="avator-bg" direction="vertical">
        <yd-flexbox-item class="avator-item">
          <div class="avator"><img src="//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg" alt=""></div>
        </yd-flexbox-item>
        <div class="user-name">{{ personalMsgs.nickName }}</div>
    </yd-flexbox>
    <yd-cell-group title="个人信息">
      <yd-cell-item arrow href="#" type="link">
        <yd-icon slot="icon" name="like-outline" size=".42rem"></yd-icon>
        <span slot="left">昵称</span>
        <span slot="right">{{ personalMsgs.nickName }}</span>
      </yd-cell-item>
      <yd-cell-item arrow @click.native="sexShow = true">
        <yd-icon slot="icon" name="like" size=".42rem"></yd-icon>
        <span slot="left">性别</span>
        <span slot="right">{{ personalMsgs.sex }}</span>
      </yd-cell-item>
      <yd-cell-item arrow @click.native="openDate">
        <yd-icon slot="icon" name="like-outline" size=".42rem"></yd-icon>
        <span slot="left">生日</span>
        <span slot="right">{{ personalMsgs.birthday }}</span>
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group title="简介">
      <yd-cell-item>
        <yd-textarea slot="right" v-model="personalMsgs.summary" placeholder="请输入简介" maxlength="80"></yd-textarea>
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group title="收货地址">
      <yd-cell-item arrow @click.native="cityShow = true">
        <yd-icon slot="icon" name="order" size=".42rem"></yd-icon>
        <span slot="left">我的收货地址</span>
        <span slot="right">{{ personalMsgs.receivingAddress }}</span>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button class="button-loginout" @click.native="loginOut" size="large" type="primary">退出登录</yd-button>
    <yd-actionsheet :items="sexItem" v-model="sexShow" cancel="取消"></yd-actionsheet>
    <yd-datetime style="display: none;" ref="date" type="date" v-model="personalMsgs.birthday"></yd-datetime>
    <yd-cityselect v-model="cityShow" :callback="result" :items="district" provance="重庆" city="南岸区" area="城区"></yd-cityselect>
  </div>
</template>
<script>
import District from 'ydui-district/dist/jd_province_city_area_id'
import HeaderNav from '_c/HeaderNav'

export default {
  name: 'PersonalCenter',
  components: {
    HeaderNav
  },
  data () {
    return {
      personalMsgs: {
        nickName: '八月',
        sex: '女',
        birthday: '2018-10-01',
        receivingAddress: '重庆 南岸区 城区',
        summary: '这是一条简介信息。'
      },
      sexShow: false,
      cityShow: false,
      district: District,
      sexItem: [
        {
          label: '男',
          callback: () => {
            this.personalMsgs.sex = '男'
            this.$dialog.toast({mes: '修改成功！', timeout: 1000})
          }
        },
        {
          label: '女',
          callback: () => {
            this.personalMsgs.sex = '女'
            this.$dialog.toast({mes: '修改成功！', timeout: 1000})
          }
        },
        {
          label: '保密',
          callback: () => {
            this.personalMsgs.sex = '保密'
            this.$dialog.toast({mes: '修改成功！', timeout: 1000})
          }
        }
      ]
    }
  },
  methods: {
    openDate () {
      this.$refs.date.open()
    },
    result (ret) {
      this.personalMsgs.receivingAddress = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
    },
    loginOut () {
      sessionStorage.clear()
      this.$dialog.toast({
        mes: '退出成功！',
        timeout: 1500,
        callback: () => {
          this.$router.push({ name: 'login' })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.avator-bg {
  padding: .5rem 0;
  background-color: #16aa6b;
}
.avator-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  .avator {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #f2f2f2;
    border-radius: 50%;
    img {
      display: block;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
    }
  }
}
.user-name {
  margin-top: .1rem;
  height: 0.4rem;
  font-size: .3rem;
  color: #fff;
}
.yd-btn-block {
  margin: .4rem auto;
  width: 90%;
}
</style>
